<template>
  <div class="store-list">
    <a-card style="margin-bottom: 10px">
      <div class="card-context">
        <div>
          <SearchOutlined /> <span style="margin-left: 10px">筛选搜索</span>
        </div>
        <div>
          <a-button style="margin-right: 20px">重置</a-button
          ><a-button type="primary">查询结果</a-button>
        </div>
      </div>
      <div style="padding: 20px">
        <a-form layout="inline">
          <a-form-item label="输入搜索">
            <a-input placeholder="请输入订单编号" />
          </a-form-item>
          <a-form-item label="收货人">
            <a-input placeholder="请输入手机号" />
          </a-form-item>
          <a-form-item label="订单状态">
            <a-select style="width: 175px" placeholder="请选择订单状态">
              <a-select-option value="1"> 待付款 </a-select-option>
              <a-select-option value="2"> 待发货 </a-select-option>
              <a-select-option value="3"> 已发货 </a-select-option>
              <a-select-option value="4"> 已完成 </a-select-option>
              <a-select-option value="5"> 已关闭 </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="下单时间">
            <a-date-picker />
          </a-form-item>
        </a-form>
      </div>
    </a-card>

    <a-card>
      <div class="card-context">
        <div>
          <BarsOutlined /><span style="margin-left: 10px">数据列表</span>
        </div>
      </div>
    </a-card>

    <a-table
      :columns="columns"
      :data-source="data"
      rowKey="orderId"
      bordered
      ellipsis
      style="margin-top: 10px"
    >
      <template #orderState="{ record }">
        <a-tooltip placement="bottom">
          <template #title>
            <span>待支付</span>
          </template>
          <a-progress
            :percent="25"
            status="active"
            v-if="record.orderState == 1"
            strokeColor="#eb2f96"
          />
        </a-tooltip>
        <a-tooltip placement="bottom">
          <template #title>
            <span>待发货</span>
          </template>
          <a-progress
            :percent="50"
            v-if="record.orderState == 2"
            status="active"
            strokeColor="#fa8c16"
          />
        </a-tooltip>
        <a-tooltip placement="bottom">
          <template #title>
            <span>已发货</span>
          </template>
          <a-progress
            :percent="75"
            v-if="record.orderState == 3"
            status="active"
          />
        </a-tooltip>
        <a-tooltip placement="bottom">
          <template #title>
            <span>已完成</span>
          </template>
          <a-progress :percent="100" v-if="record.orderState == 4" />
        </a-tooltip>

        <a-tooltip placement="bottom">
          <template #title>
            <span>已关闭</span>
          </template>
          <a-progress
            :percent="
              null == record.orderPayTime
                ? 25
                : null == record.orderDeliverTime
                ? 50
                : null == record.orderReceiveTime
                ? 75
                : 100
            "
            v-if="record.orderState == 5"
            status="exception"
          />
        </a-tooltip>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-button size="small" @click="gotoOrderInfo(record)"
            >查看订单</a-button
          >
          <a-button
            size="small"
            v-if="record.orderState >= 2 && record.orderState != 5"
            @click="closeOrder(record.orderId)"
            >关闭订单</a-button
          >
          <a-button
            size="small"
            v-if="record.orderState == 2"
            @click="gotoDeliver(record)"
            >订单发货</a-button
          >
          <a-button
            size="small"
            v-if="record.orderState == 3 || record.orderState == 4"
            @click="showModal(record)"
            >订单跟踪</a-button
          >
          <a-button
            type="danger"
            size="small"
            v-if="record.orderState == 5"
            @click="delOrder(record)"
          >
            删除订单
          </a-button>
        </a-space>
      </template>
    </a-table>

    <a-modal
      v-model:visible="visibleModal"
      title="订单跟踪 "
      :footer="null"
      width="60%"
      centered
    >
      <div id="orderTracking"></div>
    </a-modal>
  </div>
</template>
<script>
const columns = [
  {
    title: "订单编号",
    dataIndex: "orderId",
    key: "orderId",
    align: "center",
    slots: { customRender: "orderId" },
  },
  {
    title: "提交时间",
    dataIndex: "orderCreateTime",
    key: "orderCreateTime",
    align: "center",
  },
  {
    title: "用户账号",
    dataIndex: "cusId",
    key: "cusId",
    align: "center",
  },

  {
    title: "订单金额",
    dataIndex: "orderMoney",
    key: "orderMoney",
    align: "center",
  },
  {
    title: "订单状态",
    key: "orderState",
    align: "center",
    slots: { customRender: "orderState" },
  },
  {
    title: "操作",
    key: "action",
    align: "center",
    slots: { customRender: "action" },
  },
];

const data = [];

import {
  BarsOutlined,
  SearchOutlined,
  ClockCircleOutlined,
  DownOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import Base64 from "base-64";

export default {
  components: {
    BarsOutlined,
    SearchOutlined,
    ClockCircleOutlined,
    DownOutlined,
  },
  data() {
    return {
      data,
      columns,
      visibleModal: false,
    };
  },
  mounted() {},
  activated() {
    this.getData();
  },

  methods: {
    //获取数据
    getData() {
      this.$axios.get("admin/shopOrder/orderList").then((res) => {
        this.data = res.data.data;
      });
    },
    //删除订单
    delOrder(order) {
      this.$axios
        .get(
          "admin/shopOrder/del?oId=" + order.orderId + "&cusId" + order.cusId
        )
        .then((res) => {
          if (res.data.code == 2000) {
            message.success("删除成功");
            this.getData();
          } else {
          }
        });
    },
    //去订单详情页
    gotoOrderInfo(record) {
      this.$router.push({
        path: "/home/Order/OrderInfo",
        query: {
          orderInfo: Base64.encode(encodeURIComponent(JSON.stringify(record))),
        },
      });
    },
    //去订单发货页
    gotoDeliver(record) {
      let deliver = {
        addrId: record.addrId,
        oId: record.orderId,
      };
      this.$router.push({
        path: "/home/Order/Deliver",
        query: {
          deliver: Base64.encode(encodeURIComponent(JSON.stringify(deliver))),
        },
      });
    },

    //
    showModal(record) {
      this.visibleModal = true;
      console.log(record);

      this.$axios
        .get("common/address/addrById?addrId=" + record.addrId)
        .then((res) => {
          if (res.data.code == 2000) {
            //基本地图加载
            var map = new AMap.Map("orderTracking", {
              resizeEnable: true,

              mapStyle: "amap://styles/whitesmoke",
            });

            var drivingOption = {
              policy: AMap.DrivingPolicy.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
            };
            //构造路线导航类
            var driving = new AMap.Driving(drivingOption);
            // 根据起终点名称规划驾车导航路线
            driving.search(
              [
                { keyword: "南阳师范学院", city: "南阳市" },
                {
                  keyword: res.data.data.addrDistrict,
                  city: res.data.data.city,
                },
              ],
              function (status, result) {
                // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                if (status === "complete") {
                  if (result.routes && result.routes.length) {
                    // 绘制第一条路线，也可以按需求绘制其它几条路线
                    drawRoute(result.routes[0]);
                  }
                } else {
                }
              }
            );

            let orangeContext =
              ' <div style="display: flex;align-items: center;position: relative;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 4px;">' +
              '<div style="background-color: #1675f9;color: #fff;padding: 5px 10px;font-size: 20px;">发</div>' +
              '<div style="background-color: #fff;color: #000;padding: 3px 10px; font-size: 10px;">南阳市<br/>' +
              record.orderDeliverTime.split(" ")[0] +
              "</div>" +
              '<div style="position: absolute; width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid #fff;bottom: -10px;left: 50%;z-index:999"></div>' +
              '<div style="position: absolute;bottom: -15px;height: 10px; width: 10px;border-radius: 50%;left: 54%;border: 2px solid #1675f9;background-color: #fff;"></div>' +
              "</div>";
            let destinationContext =
              ' <div style="display: flex;align-items: center;position: relative;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 4px;">' +
              '<div style="background-color: #05ae5f;color: #fff;padding: 5px 10px;">收</div>' +
              '<div style="background-color: #fff;color: #000;padding: 5px 10px;">' +
              res.data.data.addrDistrict +
              "</div>" +
              '<div style="position: absolute; width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid #fff;bottom: -10px;left: 50%; z-index:999"></div>' +
              '<div style="position: absolute;bottom: -15px;height: 10px; width: 10px;border-radius: 50%;left: 52%;border: 2px solid #00a35a;background-color: #fff;"></div>' +
              "</div>";

            //画路径
            function drawRoute(route) {
              var path = parseRouteToPath(route);

              var startMarker = new AMap.Marker({
                position: path[0],
                content: orangeContext,
                offset: new AMap.Pixel(0, 0), // 设置点标记偏移量
                anchor: "bottom-center", // 设置锚点方位
                map: map,
              });

              var endMarker = new AMap.Marker({
                position: path[path.length - 1],
                content: destinationContext,
                offset: new AMap.Pixel(0, 0), // 设置点标记偏移量
                anchor: "bottom-center", // 设置锚点方位
                map: map,
              });

              var routeLine = new AMap.Polyline({
                path: path,
                isOutline: true,
                outlineColor: "#ffeeee",
                borderWeight: 2,
                strokeWeight: 5,
                strokeColor: "#0091ff",
                lineJoin: "round",
              });

              routeLine.setMap(map);

              // 调整视野达到最佳显示区域
              map.setFitView([startMarker, endMarker, routeLine]);
            }
            // 解析DrivingRoute对象，构造成AMap.Polyline的path参数需要的格式
            // DrivingResult对象结构参考文档 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DriveRoute
            function parseRouteToPath(route) {
              var path = [];

              for (var i = 0, l = route.steps.length; i < l; i++) {
                var step = route.steps[i];

                for (var j = 0, n = step.path.length; j < n; j++) {
                  path.push(step.path[j]);
                }
              }

              return path;
            }

            window.map = map;
          } else {
          }
        });
    },
    closeOrder(id) {
      this.$axios
        .get("admin/shopOrder/close?oId=" + id + "&des=---")
        .then((res) => {
          if (res.data.code == 2000) {
            message.success("修改成功");
            this.getData();
          } else {
            message.error("修改失败");
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.store-list {
  padding: 24px;
  background-color: #fff;
  margin: 24px 16px;
}
.card-context {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-context > div:nth-child(1) {
  font-size: 20px;
}
#orderTracking {
  height: 80vh;
  width: 100%;
}


</style>